$direction:(
    l:left,
    r:right,
    t:top,
    b:bottom
);
$edge:(
    p:padding,
    m:margin,
);
@for $i from 1 through 5{
    $res:(10rpx * $i);
    @each $k,$v in $edge{
        .#{$k}-#{$i}{ #{$v}:$res ;}
        @each $key,$value in $direction {
            .#{$k}#{$key}-#{$i}{
                #{$v}-#{$value}:$res;
            }
        }
        .#{$k}x-#{$i}{#{$v}-left: $res;#{$v}-right: $res !important;}
        .#{$k}y-#{$i}{#{$v}-top:  $res;#{$v}-bottom: $res !important;}
    }
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.m-auto{
    margin:auto
}


